<template>
  <!-- 资产转移 -->
  <div class="repairs-form">

    <!-- 轮播图组件 -->
    <Carousel :assetInfoList="assetInfoList" />

    <!-- 数据 start -->
    <div class="repairs-box">
      <p class="b-title">转移数据</p>
      <van-form>
        <!-- <van-field
          v-model="department"
          label="当前部门:"
          disabled
          placeholder="读取资产所在部门"
        /> -->
        <van-field
          v-model="user"
          label="转移人员:"
          disabled
          placeholder="读取当前员工"
        />
        <van-cell
          required
          title="转移目标:"
          is-link
          :value="transferVal"
          @click="show = true"
        />
        <van-action-sheet
          v-model="show"
          :actions="transferList"
          cancel-text="取消"
          @cancel="show = false"
          @select="selectTransferVal"
        />

        <!-- 分配部门 -->
        <van-cell
          v-if="form.ts_type === 1"
          title="分配部门:"
          is-link
          required
          :value="department_name"
          @click="openDepartment"
        />
        <van-action-sheet
          v-model="showDept"
          :actions="departmentList"
          cancel-text="取消"
          @cancel="showDept = false"
          @select="selectDepartment"
        />

        <van-field
          v-model="time"
          label="转移时间:"
          disabled
          placeholder="默认当前时间"
        />
        <div class="pt-10"></div>
        <van-field
          v-model="form.ts_reason"
          type="textarea"
          placeholder="请输入转移备注"
          rows="5"
          autosize
          required
          label="转移备注"
        />
        <div style="padding: 16px 16px 40px;background-color: #f8f9fd;">
          <van-button block type="info" native-type="submit" @click="handleCreateTransfer">
            提交转移
          </van-button>
        </div>
      </van-form>
    </div>
    <!-- 数据 end -->

  </div>
</template>

<script>
import Carousel from '@/components/Carousel';
import { COMMON_TYPES } from '@/constant';

export default {
  name: 'repairs-form',
  components: {
    Carousel
  },
  props: ['$type'],
  data () {
    return {
      COMMON_TYPES,
      department: this.$store.getters.departmentList[0].department_name, // 默认部门
      user: this.$store.getters.name, // 默认人员
      time: this.$dayjs().format('YYYY-MM-DD'), // 默认时间
      form: {
        re_id: '', // 领用ID
        ts_a_id: '', // 资产ID
        ts_type: '', // 转移目标: 1.转人 2.转部门
        ts_reason: '', // 转移原因
        users: [], // 转移员工数据 // [{“name”:”刘盛鹏”,”avatar”:””,”userid”:”manager8198”}]
        departments: [] // 转移部门数据 // [{'id':'1','name':'根部门','number':'66'}]
        // users: [{ 'name': '曾楚玲', 'avatar': '', 'userid': '193705431926203414' }]
      },
      assetInfoList: {}, // 资产信息
      show: false, // 转移目标上拉框显示
      transferVal: '请选择转移目标', // 选中转移目标显示
      transferList: [ // 转移目标列表 1.人 2.部门
        { name: '选择转移人', id: 1 },
        { name: '选择转移部门', id: 2 }
      ],
      department_name: '请选择分配部门', // 可分配部门选中显示名
      dept_id: '', // 可分配部门选中id
      departmentList: [], // 可分配部门列表
      showDept: false // 可分配部门上拉框选项
    };
  },
  methods: {
    // 获取资产信息详情,回显轮播图组件
    getAssetInfo () {
      let params = {
        id: this.$route.query.f_id
      };
      this.$api.getAssetInfo(params).then(res => {
        if (res.code === 0) {
          this.assetInfoList = res.result;
        }
      });
    },
    // 选择转移目标
    selectTransferVal (item) {
      this.form.ts_type = item.id;
      this.show = false;
      if (item.name === '选择转移人') {
        this.selectPeople();
      } else if (item.name === '选择转移部门') {
        // this.getCheckDept(); // 获取不可选部门
        this.setDepartment();
      }
    },
    // 选择转移人
    async selectPeople () {
      try {
        const options = {
          multiple: false
          // users: this.form.users.map(item => item.emplId)
        };
        const result = await this.$dd.choosePeople(options);
        this.form.users = result;
        this.transferVal = this.form.users.map(item => item.name);
      } catch (error) {
        console.error('选人失败', error);
      }
    },
    // 选择转移部门
    async setDepartment () {
      try {
        const options = {
          multiple: false
          // pickedDepartments: this.form.departments.map(item => item.id)
          // disabledDepartments
        };
        const result = await this.$dd.chooseDepartment(options);
        this.form.departments = result.departments;
        this.transferVal = this.form.departments.map(item => item.name);
      } catch (error) {
        console.error('选部门失败', error);
      }
    },
    // 创建转移
    handleCreateTransfer () {
      if (!this.form.users.length && !this.form.departments.length) {
        this.$toast.fail('请选择转移目标');
        return;
      }
      if (!this.form.ts_reason) {
        this.$toast.fail('请输入转移备注');
        return;
      }
      let params = {
        ...this.form,
        ts_a_id: this.$route.query.f_id,
        re_id: this.$route.query.id,
        dept_id: this.dept_id || ''
      };
      this.$api.postTransferAddTransfer(params).then(res => {
        if (res.code === 0) {
          this.$toast.success('提交转移成功');
          if (this.$type === COMMON_TYPES.MY && this.$route.query.c_from === '首页') {
            this.$router.replace({
              name: 'home',
              query: {
                title: '首页',
                type: COMMON_TYPES.MY
              }
            });
          } else if (this.$type === COMMON_TYPES.DEPARTMENT) {
            this.$router.replace({
              name: 'my-collecting',
              query: {
                title: '部门领用资产',
                type: COMMON_TYPES.DEPARTMENT,
                dept_id: this.$route.query.dept_id
              }
            });
          } else if (this.$type === COMMON_TYPES.MY) {
            this.$router.replace({
              name: 'my-collecting',
              query: {
                title: '我领用的资产',
                type: COMMON_TYPES.MY
              }
            });
          }
        }
      });
    },
    // 打开选择部门上拉框
    openDepartment () {
      this.showDept = true;
      this.getCheckUser();// 获取可分配部门
    },
    // 选择可分配部门
    selectDepartment (item) {
      this.department_name = item.re_dept_name;
      this.dept_id = item.re_dept_id;
      this.showDept = false;
    },
    // 获取可分配部门 form.ts_type === 1
    getCheckUser () {
      let params = {
        userid: this.form.users.map(item => item.emplId).join(','),
        wh_id: this.assetInfoList.wh_id
      };
      this.$api.getCheckUser(params).then(res => {
        if (res.code === 0) {
          this.departmentList = res.result.map(item => ({
            ...item,
            name: item.re_dept_name
          }));
        }
      });
    }
    // 获取不可选部门
    // getCheckDept () {
    //   let params = {
    //     wh_id: this.assetInfoList.wh_id
    //   };
    //   this.$api.getCheckDept(params).then(res => {
    //     if (res.code === 0) {
    //       let disabledDepartments = [];
    //       disabledDepartments.push(res.result.dept_ids);
    //       this.setDepartment(disabledDepartments);
    //     }
    //   });
    // }
  },
  created () {
    this.getAssetInfo(); // 获取资产信息详情, 回显轮播图组件;
    // const dep = [{ 'id': '1', 'name': '根部门', 'number': '66' }];
    // console.log(dep.map(item => item.id));
    // const dep = '361254061,363224056,363497039,363245081';
    // let disabledDepartments = [];
    // disabledDepartments.push(dep);
    // console.log(disabledDepartments);
  }
};
</script>

<style lang="scss" scoped>
.repairs-form {
  // 转移数据
  .repairs-box {
    .b-title {
      color:#1B1B1C;
      font-size: 16px;
      padding: 12px 20px 12px 15px;
      background-color: #f8f9fd;
    }
    ::v-deep.van-field__label {
      width: 78px;
    }
    .pt-10 {
      height: 10px;
      background-color: #f8f9fd;
    }
    .tips {
      font-size: 12px;
      color: #C1C1C1;
    }
  }
  ::v-deep.van-field__control--custom {
    display: flex;
    flex-wrap: wrap;
  }
}
</style>
